.home {
  color: #333333;

  .head {
    position: relative;
    height: 3.5rem;
    background: skyblue;
    box-sizing: border-box;
    padding: 0 0.5rem;
    overflow: hidden;

    .avatar {
      position: absolute;
      bottom: 0.5rem;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;

      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
      }
    }

    .title {
      position: absolute;
      left: 3rem;
      font-size: 1.2rem;
      bottom: 0.5rem;
    }

    .calendar {
      position: absolute;
      bottom: 0.1rem;
      right: 5rem;
      font-size: 1.8rem;
    }

    .manage {
      position: absolute;
      bottom: 0.5rem;
      font-size: 1.2rem;
      right: 0.8rem;
    }
  }

  .bullhorn {
    box-sizing: border-box;
    padding: 0.3rem 0;
    padding-left: 0.5rem;
    border-bottom: 0.1rem solid #cccccc;
    font-family: '楷体';
  }

  .todo_content {
    position: relative;
    margin-top: 0.5rem;

    .todos {
      position: relative;
      box-sizing: border-box;

      .todo {
        display: flex;
        flex-direction: row;
        margin-top: 0.5rem;
        box-sizing: border-box;
        padding: 0 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 0.1rem solid #cccccc;
        height: 3.5rem;

        .time {
          display: flex;
          flex-direction: column;
          flex: 1;
          text-align: center;
          border-right: 0.08rem solid #cccccc;
          padding-top: 1rem;
          padding-right: 0.5rem;
        }

        .content {
          flex: 3;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: nowrap;
          padding-left: 0.5rem;
          line-height: 3.5rem;
        }

        .btn {
          display: flex;
          flex-direction: column;
          flex: 1;
          align-items: center;

          .finished, .del {
            height: 1.5rem;
            width: 4rem;
            line-height: 1.5rem;
          }

          .del {
            margin-top: 0.5rem;
          }
        }
      }
    }
  }

  .add_todo {
    position: relative;
    box-sizing: border-box;
    margin-top: 1rem;
    color: #999999;
    text-align: center;

    .add {
      position: absolute;
      box-sizing: border-box;
      padding: 0.5rem;
      border: 0.1rem solid #cccccc;
      width: 10rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .user_info {
    font-family: '楷体';

    .title {
      width: 100%;
      height: 3.5rem;
      background: rgb(51, 51, 51);
      color: #eeeeee;
      font-family: '楷体';
      font-size: 1.5rem;
      text-align: center;
      line-height: 3.5rem;
    }

    .user_des {
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
      padding: 0 1rem;
      background: rgb(51, 51, 51);
      width: 100%;
      height: 6rem;
      color: #eeeeee;

      .avatar {
        height: 4rem;
        width: 4rem;
        border-radius: 50%;

        img {
          height: 100%;
          width: 100%;
          border-radius: 50%;
        }
      }

      .nick_name {
        flex: 1;
        margin-left: 0.8rem;
        font-size: 1.5rem;
      }
    }

    .charactor {
      li {
        margin-top: 1rem;
        font-size: 1.5rem;
        border-bottom: 0.08rem solid #cccccc;
        height: 2rem;
      }
    }
  }

  // .add_new {
  //   font-family: '楷体';

  //   .head {
  //     position: relative;
  //     width: 100%;
  //     height: 3.5rem;
  //     background: rgb(51, 51, 51);
  //     color: #eeeeee;
  //     font-family: '楷体';
  //     font-size: 1.5rem;

  //     .title {
  //       font-size: 1.5rem
  //       position: absolute;
  //       top: 30%;
  //       transform: translateY(-50%);
  //       left: 50%;
  //       transform: translateX(-50%);
  //     }

  //     .affirm {
  //       font-size: 1.5rem
  //       position: absolute;
  //       top: 30%;
  //       transform: translateY(-50%);
  //       right: -0.5rem;
  //       transform: translateX(-50%);
  //     }
  //   }
  // }
}